<template>
  <div class="innerPageTable-box-OneTwo innerPageTable-out-flex">
     <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="modelForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="name" :label="$t('module.modelList.modelName')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.name"
            placeholder
            
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="key" :label="$t('module.modelList.modelKey')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.key"
            placeholder
            
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
           <RPButton optType="search" @click="search" />
           <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="modelListTable" :config="tableConfig">
      <div slot="table-bar">
        <RPButton
          :disabled="isButtonDisabled"
          v-bind:class="{delColor:isButtonDisabled}"
          optType="create"
          @click="addModel"
        />
        <RPButton
          :disabled="isButtonDisabled"
          v-bind:class="{delColor:isButtonDisabled}"
          icon="ios-cloud-upload"
          :text="$t('module.modelList.importModel')"
          @click="importModel"
        />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import ModelEdit from './ModelEdit.vue'
import { queryModelList, createModel, publishModel, deleteModel, exportModel } from '@api/flowable/modelList.js'
import { modelListColumns } from './columns.js'
import IframeContainer from '@/components/IframeContainer.vue'
export default {
  name: 'menu-resource',
  props: {
    procTypeInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: { IframeContainer },
  data() {
    return {
      isButtonDisabled: !this.procTypeId || this.procTypeId === '0',
      searchForm: {
        procTypeId: '',
        procTypeCode: '',
        name: '',
        key: ''
      },
      tableConfig: {
        loadDataFn: ({ responseProcess, param }) => {
          queryModelList(param).then(res => responseProcess(res.data))
        },
        columnsFn: modelListColumns.bind(this),
        autoFirst: false,
        loading: false
      }
    }
  },
  computed: {
    procTypeId() {
      return this.procTypeInfo.id
    },
    typeCode() {
      return this.procTypeInfo.typeCode
    }
  },
  created() {
    this.setProcTypeInfo()
  },
  mounted() {
    this.search()
  },
  methods: {
    setProcTypeInfo() {
      this.isButtonDisabled = !this.procTypeId || this.procTypeId === '0'
      this.searchForm.procTypeId = this.procTypeId
      this.searchForm.procTypeCode = this.typeCode
    },
    publishModel(modelInfo) {
      new $confirm(this.$t('module.modelList.confirmToPublish'), this).then(() => {
        this.tableConfig.loading = true
        publishModel({ modelId: modelInfo.id }).then(res => {
          this.tableConfig.loading = false
          this.$Message.success({
            content: this.$t('module.modelList.publishSuccessfully'),
            duration: 3
          })

          ++modelInfo.version
        })
      })
    },
    search() {
      //刷新列表
      this.$refs['modelListTable'].load(this.searchForm)
    },
    reset() {
      this.$refs['modelForm'].resetFields()
      this.search()
    },
    designModel(modelInfo) {
      new this.$sidelipPage(
        IframeContainer,
        {
          attrs: {
            src: '/static/modeler/#/editor/' + modelInfo.id + '/' + modelInfo.version 
          },
          full: true,
          isNav: false
        },
        () => {}
      )
    },
    addModel() {
      let modelInfo = {}
      modelInfo.procTypeId = this.procTypeId
      new this.$pageModal(
        ModelEdit,
        {
          props: {
            modelInfo
          }
        },
        data => {
          if (data) {
            this.search()
          }
        }
      )
    },
    importModel() {
      let modelInfo = { procTypeId: this.procTypeId, optType: 'import' }
      new this.$pageModal(
        ModelEdit,
        {
          props: {
            modelInfo
          }
        },
        data => {
          if (data) {
            this.search()
          }
        }
      )
    },
    editModel(modelInfo) {
      modelInfo.procTypeId = this.procTypeId
      modelInfo.optType = ''
      new this.$pageModal(
        ModelEdit,
        {
          props: {
            modelInfo
          }
        },
        data => {
          if (data) {
            this.search()
          }
        }
      )
    },
    _deleteModel(data) {
      new $confirm(this.$t('common.warning.confirmToDelete'), this).then(() => {
        // data.procTypeId = this.procTypeId
        deleteModel(data).then(res => {
          this.$Message.success({
            content: this.$t('common.deleteSuccess'),
            duration: 3
          })
          this.search()
        })
      })
    },
    _exportModel(modelId) {
      exportModel(modelId).then(res => {
        const { headers, data } = res
        let contentType = headers['content-type']
        const hrefValue = window.URL.createObjectURL(data)
        const fileInfo = res.headers['content-disposition'].split(';')[2]
        const a = document.createElement('a')
        a.setAttribute('href', hrefValue)
        a.download = decodeURIComponent(fileInfo && fileInfo.split("''")['1'])
        document.body.append(a)
        a.click()
        a.remove()
      })
    },
    _copyModel(modelInfo) {
      modelInfo.procTypeId = this.procTypeId
      modelInfo.optType = 'copy'
      new this.$pageModal(
        ModelEdit,
        {
          props: {
            modelInfo
          }
        },
        data => {
          if (data) {
            this.search()
          }
        }
      )
    }
  },
  watch: {
    procTypeId(newVal, oldVal) {
      if (oldVal !== newVal) {
        this.setProcTypeInfo()
        this.search()
      }
    }
  }
}
</script>
<style lang="less">
.delColor {
  color: #c5c8ce !important;
  background-color: #f7f7f7 !important;
  border-color: #dcdee2 !important;
  span {
    color: #c5c8ce !important;
    background-color: #f7f7f7 !important;
    border-color: #dcdee2 !important;
  }
}
</style>